<template>
    <div class="page-wrapper">
        <div class="header">
            <div class="left">
                <div class="label">乐刷总资产（元）</div>
                <div class="value">{{ aviBal }}</div>
            </div>
            <div class="right">
                <img src="@/assets/purseBg.png" alt="" />
            </div>
        </div>
        <div class="purse" v-for="(item, index) in aList" :key="item.accountType">
            <img class="bg" src="@/assets/purseBg.png" alt="" />
            <div class="content">
                <div class="left">
                    <div class="top">{{ item.accountName }}</div>
                    <div class="bottom">
                        <div class="left">{{ item.aviBal }}</div>
                    </div>
                </div>
                <div class="right" v-if="index <= 5 && item.accountType !== 'SUBSIDY'" @click="goTxPage(item)">
                    {{ item.accountName === '乐刷账户' ? '查看' : '提现' }}
                </div>
                <div class="right" v-if="index > 5 && item.accountType !== 'SUBSIDY'" @click="goTxPage(item)">
                    {{ item.accountName === '乐刷账户' ? '查看' : '提现' }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { accountList, lsAccountList } from '@/api/wallet'
import router from '@/router'
import store from '@/store'
const aList = ref([])
const aviBal = ref(0)
const getLsAccountList = () => {
    lsAccountList({}).then(res => {
        aList.value = res.object
    })
}
const getAccountList = () => {
    accountList({}).then(res => {
        let ii = res.object.find(item => item.accountName === '乐刷账户')
        aviBal.value = ii.aviBal
        getLsAccountList()
    })
}
const goTxPage = item => {
    if (item.accountName === '乐刷账户') {
        router.push({
            path: '/cashInfo',
            query: {
                businessCode: item.businessCode,
                balance: item.balance,
                accountType: item.accountType,
                token: store.state.user.token
            }
        })
    } else {
        router.push({
            path: '/cashInfo',
            query: {
                businessCode: item.businessCode,
                balance: item.balance,
                accountType: item.accountType,
                token: store.state.user.token
            }
        })
    }
}
getAccountList()
</script>

<style scoped lang="scss">
.page-wrapper {
    height: 100vh;
    padding: 20px;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        height: 114px;
        background: linear-gradient(159deg, #66d6ff 0%, #a9d0fe 100%);
        opacity: 1;
        border-radius: 10px;
        .left {
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
            line-height: 30px;
            .value {
                font-size: 20px;
            }
        }
        .right {
            img {
                width: 63px;
                height: 88px;
            }
        }
    }
    .purse {
        position: relative;
        margin-top: 10px;
        .bg {
            width: 100%;
        }
        .content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            .right {
                color: #ffffff;
                margin-right: 15px;
            }
            .top {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                opacity: 1;
            }
            .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    font-size: 20px;
                    font-weight: 500;
                    color: #ffffff;
                    opacity: 1;
                    margin-top: 10px;
                }
                .right {
                    width: 74px;
                    height: 27px;
                    background: #ffffff;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #f3ad52;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    .purse:nth-child(1) {
    }
}
</style>
